<template>
  <div class="recruitment-data">
    <el-container>
      <el-main>
        <div class="data-summary">
          <div class="summary-item" v-for="(item, index) in dataItems" :key="index">
            <div class="value">{{ item.value }}</div>
            <div class="label">{{ item.label }}</div>
            <div class="icon"><i :class="item.icon"></i></div>
          </div>
        </div>
        <div ref="chart" style="width: 100%; height: 400px;"></div>
      </el-main>
    </el-container>
  </div>
</template>


<script>
import axios from 'axios';
import * as echarts from 'echarts';


export default {
  name: 'RecruitmentData',
  data() {
    return {
      chart: null,
      dataItems: [],
      ExchartsList: [],
    };
  },
  mounted() {
    this.findcount();
    this.findExcharts();
  },
  methods: {
    findcount() {
      axios.get("/api/cand/findCount").then(res => {
        this.dataItems = res.data.data;
        console.log("数据", this.dataItems);
        // this.initChart();
      });
    },
    findExcharts() {
      axios.get("/api/cand/findEchartsList").then(res => {
        this.ExchartsList = res.data.data;
        console.log("数据", this.ExchartsList);
         this.initChart();
      });
    },
    initChart() {
      const myChart = echarts.init(this.$refs.chart);
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          data: this.ExchartsList.dateList,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '接收简历',
            type: 'bar',
            data: this.ExchartsList.zongList,
          },
          {
            name: '面试中',
            type: 'bar',
            data: this.ExchartsList.mianshizhongList,
          },
          {
            name: '待入职',
            type: 'bar',
            data: this.ExchartsList.onboardingList,
          },
        ],
        legend: {
          data: ['接收简历', '面试中', '待入职']
        },
      };


      myChart.setOption(option);
    }
  }
};
</script>


<style scoped>
.recruitment-data {
  display: flex;
  flex-direction: column;
  align-items: center;
}


.el-container {
  width: 80%;
  margin: 0 auto;
}


.el-header {
  background-color: #e6e6e6;
  padding: 10px 0;
  text-align: center;
  font-size: 1.2em;
}


.el-main {
  padding: 20px;
}


.data-summary {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}


.summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin: 10px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.summary-item .value {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 5px;
}


.summary-item .label {
  margin-bottom: 5px;
}


.summary-item .icon {
  font-size: 2em;
  color: #ccc;
}
</style>